<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CONTROLLER</title>
    <script src="../static/js/jquery.min.js" charset="utf-8"></script>
    <script src="../static/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../static/vue/vue.min.js"></script>
    <script src="../static/vue/vue-tables-2.min.js"></script>


    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <style media="screen">
      .margin-top-5{margin-top: 5px;}
      .font-size-x2{font-size: 200%;}
    </style>

  </head>
  <body>
    <div class="container-fluid margin-top-5" id="master-page">
      <!-- tab head -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#Presciption" data-toggle="tab" @click=""><h2>处方</h2></a></li>
        <!-- <li><a href="#Transaction" data-toggle="tab" @click=""><h2>购物车</h2></a></li> -->
        <li><a href="#Buys" data-toggle="tab" @click=""><h2>购买历史</h2></a></li>
        <h1 class="pull-right">
          <select v-model="username" @change="changeUser()" class="form-control" style="height: 80px; width: 200px;font-size:100%;">
            <option value="*">监管部门</option>
            <option value="patientid1">病人A</option>
            <option value="patientid2">病人B</option>
          </select>
        </h1>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade margin-top-5 in active" id="Presciption">
          <v-client-table :columns="columns.prescription" :data="lines.prescription" :options="options">
              <div slot="chemistry_name" slot-scope="props">{{chemistry[props.row.chemistry_name]}}</div>
              <div slot="patient_id" slot-scope="props">{{patient[props.row.patient_id]}}</div>
              <div slot="hospital_id" slot-scope="props">{{hospital[props.row.hospital_id]}}</div>
              <div slot="detail" slot-scope="props">
                  <button type="button" class="btn btn-info btn-block btn-md"
                  @click="showDetail(lines.prescription_statistics[props.row.presciption_id], props.row)"
                  :disabled="lines.prescription_statistics[props.row.presciption_id].tx_num<1"> 查看</button>
              </div>
          </v-client-table>
        </div>
        <div class="tab-pane fade margin-top-5" id="Transaction">
          <v-client-table :columns="columns.transaction" :data="lines.transaction" :options="options">
              <div slot="chemistry_name" slot-scope="props">{{chemistry[props.row.chemistry_name]}}</div>
              <div slot="patient_id" slot-scope="props">{{patient[props.row.patient_id]}}</div>
              <div slot="_ts" slot-scope="props"><span style="display:none;">{{props.row.ts}}</span>{{props.row._ts}}</div>
          </v-client-table>
        </div>
        <div class="tab-pane fade margin-top-5" id="Buys">
          <v-client-table :columns="columns.buy" :data="lines.buy" :options="options">
              <div slot="medicine_name" slot-scope="props">{{medicine[props.row.medicine_name]}}</div>
              <div slot="patient_id" slot-scope="props">{{patient[props.row.patient_id]}}</div>
              <div slot="_ts" slot-scope="props"><span style="display:none;">{{props.row.ts}}</span>{{props.row._ts}}</div>
          </v-client-table>
        </div>
      </div>

      <!-- modal -->
      <div class="modal fade" tabindex="-1" role="dialog" id="BUY_MODAL">
        <div class="modal-dialog" role="document" style="width:88%;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Buy Medicine - {{buy_modal.name}}</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <v-client-table :columns="columns.tx" :data="buy_modal.lines" :options="options">
                      <div slot="medicine_name" slot-scope="props">{{medicine[props.row.medicine_name]}} - {{props.row.medicine_name}}</div>
                      <div slot="patient_id" slot-scope="props">{{patient[props.row.patient_id]}}</div>
                      <div slot="_ts" slot-scope="props"><span style="display:none;">{{props.row.ts}}</span>{{props.row._ts}}</div>
                      <div slot="buy" slot-scope="props"><button class="btn btn-success btn-md btn-block" @click="buy(props.row, $event)" :disabled="props.row.ishandled>1">选择</button></div>
                  </v-client-table>
                </div>
              </div>
            </div>
            <div class="modal-footer margin-top-5">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <!-- <button type="button" class="btn btn-primary" @click="addDrug()" :disabled="new_drug.name==''||new_drug.qty<1">Finish</button> -->
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

    </div>
  </body>

  <!-- map for  chinese name -->
  <script src="../static/info/map.js" charset="utf-8"></script>
  <!-- vue -->
  <script>
      // var ServerIP = window.location.host
      var ServerIP = "172.20.10.8:"+window.location.port
      Vue.use(VueTables.ClientTable);
      var app = new Vue({
      	el: '#master-page',
      	data: function(){
      		return {
      			medicine: medicine,
      			chemistry: chemistry,
      			patient: patient,
      			hospital: hospital,
      			username: "*",
      			edit_flag: false,
            columns:{
              prescription:["key", "isbuy",  "hospital_id",  "patient_id",  "policy",  "presciption_id",  "_ts",  "type",  "amount",  "chemistry_name",  "disease",  "doctor_id", "detail",],
              transaction:["key", "patient_id",  "ishandled",  "amount",  "medicine_name",  "presciption_id",  "price",  "site",  "_ts",],
              tx:["key", "patient_id",  "ishandled",  "amount",  "medicine_name",  "presciption_id",  "price",  "site",  "_ts", "buy",],
              buy:["key", "patient_id",  "type",  "medicine_amount",  "medicine_name",  "medicine_price",  "presciption_id",  "site",  "_ts",],
            },
            options: {
      				sortable: ["key", "isbuy",  "hospital_id",  "patient_id",  "policy",  "presciption_id",  "_ts",  "type",  "amount",  "chemistry_name",  "disease",  "doctor_id",],
              headings: {
      					patient_id: "病人ID", //
      					presciption_id: "处方ID", //
      					medicine_name: "药名", //
      					amount: "剂量", //
      					policy: "属性策略", //
      					_ts: "时间", //
      					site: "药店地址", //
      					price: "总价", //
      					ishandled: "状态", //
      					key: "#", //
      					isbuy: "购买状态", //
      					hospital_id: "医院ID", //
      					presciption_id: "处方ID", //
      					type: "类型", //
      					chemistry_name: "化学品名", //
      					disease: "诊断", //
      					medicine_amount: "剂量", //
      					medicine_price: "价格", //
      					doctor_id: "医生ID", //
      					detail: "详情", //
      					buy: "购买", //
      				},
              orderBy: { ascending:false, column:"_ts", }
      			},
            lines:{
              prescription:[],
              transaction:[],
              buy:[],
              prescription_statistics:{},
            },
            buy_modal:{
              lines:[],
              num:0,
              name:"",
              pre_info:{},
              choose:-1,
            },
      		}
      	},
      	methods: {
          getPrescription: function(){
            var _this = this;
            _this.lines.prescription = []
            var postData = {}
            postData["username"] = _this.username
            $.ajaxSetup({async: false});
      			$.post("http://"+ ServerIP + "/getprescriptions",postData,function(data,status){
      				if (status=="success") {
                var objs = eval(data)
                if (objs==null) {return}
                console.log(objs)

                $.each(objs, function(k,v){
                    var tmp = {}
                    tmp["key"] = k
                    tmp["isbuy"] = v["isbuy"]

                    tmp["hospital_id"] = v.data.hospital_id
                    tmp["patient_id"] = v.data.patient_id
                    tmp["policy"] = v.data.policy
                    tmp["presciption_id"] = v.data.presciption_id
                    tmp["ts"] = v.data.ts
                    tmp["type"] = v.data.type

                    tmp["amount"] = v.data.data.amount
                    tmp["chemistry_name"] = v.data.data.chemistry_name
                    tmp["disease"] = v.data.data.disease
                    tmp["doctor_id"] = v.data.data.doctor_id

                    tmp["_ts"] = (new Date(v.data.ts*1000)).toLocaleString()

                    _this.lines.prescription.push(tmp)
                    _this.lines.prescription_statistics[tmp["presciption_id"]] = {
                      tx_num: 0,
                      tx:[],
                    }
                });
                $.ajaxSetup({async: true});
      				}else{alert("Error!Code: "+status);}
      			});
          },
          getTransaction: function(){
            var _this = this;
            _this.lines.transaction = []
            var postData = {}
            postData["username"] = _this.username
            // $.ajaxSetup({async: false});

      			$.post("http://"+ ServerIP + "/gettransactions",postData,function(data,status){
      				if (status=="success") {
                var objs = eval(data)
                if (objs==null) {return}
                console.log(objs)

                // ###################  to be discussed
                $.each(objs, function(k,v){
                    var tmp = {}
                    tmp["key"] = k
                    tmp["patient_id"] = v.patient_id
                    tmp["ishandled"] = v.ishandled

                    tmp["amount"] = v.data.amount
                    tmp["medicine_name"] = v.data.medicine_name
                    tmp["presciption_id"] = v.data.presciption_id
                    tmp["price"] = v.data.price
                    tmp["site"] = v.data.site
                    tmp["ts"] = v.data.ts

                    tmp["_ts"] = (new Date(v.data.ts*1000)).toLocaleString()

                    _this.lines.transaction.push(tmp)

                    _this.lines.prescription_statistics[tmp["presciption_id"]].tx.push(tmp)
                    _this.lines.prescription_statistics[tmp["presciption_id"]].tx_num++
                });
                // $.ajaxSetup({async: true});
      				}else{alert("Error!Code: "+status);}
      			});
          },
          getBuys: function(){
            var _this = this;
            _this.lines.buy = []
            var postData = {}
            postData["username"] = _this.username

      			$.post("http://"+ ServerIP + "/getbuys",postData,function(data,status){
      				if (status=="success") {
                var objs = eval(data)
                if (objs==null) {return}
                console.log(objs)
                // return
                // ###################  to be discussed
                $.each(objs, function(k,v){
                    var tmp = {}
                    tmp["key"] = k
                    tmp["patient_id"] = v.patient_id
                    tmp["type"] = v.type

                    tmp["medicine_amount"] = v.data.medicine_amount
                    tmp["medicine_name"] = v.data.medicine_name
                    tmp["medicine_price"] = v.data.medicine_price
                    tmp["presciption_id"] = v.data.presciption_id
                    tmp["site"] = v.data.site
                    tmp["ts"] = v.data.ts

                    tmp["_ts"] = (new Date(v.data.ts*1000)).toLocaleString()

                    _this.lines.buy.push(tmp)

                    // _this.lines.prescription_statistics[tmp["presciption_id"]].tx.push(tmp)
                    // _this.lines.prescription_statistics[tmp["presciption_id"]].tx_num++
                });

      				}else{alert("Error!Code: "+status);}
      			});
          },
          buy: function(row){

      			var _this = this;
      			var postData = {};
            postData.patient_id = row["patient_id"]
            postData.ishandled = row["ishandled"]
            postData.data = {}

            postData.data.presciption_id = row["presciption_id"]
            postData.data.medicine_name = row["medicine_name"]
            postData.data.amount = row["amount"]
            postData.data.ts = row["ts"]
            postData.data.site = row["site"]
            postData.data.price = row["price"]
            postData["ishandled"] = 1

            console.log(postData);

            $.ajax({
              type: 'POST',
              url: "http://"+ ServerIP + "/userbuymedicine",
              data: JSON.stringify(postData),
              success: function(result){
                  console.log(result);
                  // console.log("xxxxxxx");
                  // _this.lines.pool[row.key].ishandled = 1
              },
              dataType: "json"
            });
          },
          showDetail: function(tx_info, pre_info){

              this.buy_modal.lines = tx_info.tx
              this.buy_modal.num = tx_info.tx_num
              this.buy_modal.pre_info = pre_info
              this.buy_modal.name = this.chemistry[pre_info.chemistry_name]

              console.log(this.buy_modal)
              $("#BUY_MODAL").modal("show")
          },
          changeUser: function(){
            this.prescription_statistics = {}
            this.getPrescription()
            this.getTransaction()
            this.getBuys()
          },
      	},
      	computed: {
      	},
      	created(){
          this.getPrescription()
          this.getTransaction()
          this.getBuys()
      	}
      });
  </script>
</html>
